// src/Views/PublishedNews/index.vue
<template>
  <div>
    <div class="header">
      <span>国际化信息</span>
      <div>
       <a href="http://localhost:3000/i18n/export?format=csv&languageTags=zh-CN,en-US&download=true&filename=i18n-data" target="_blank">导出</a>
        <el-button type="primary">+ 新建</el-button>
      </div>
    </div>
    <div class="container">
      <el-table :data="I18nList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="language_tag" label="语言标签" width="100" />
        <el-table-column prop="code" label="国际化标识" width="240" />
        <el-table-column prop="message" label="文本值" width="260" />
        <el-table-column prop="remarks" label="备注" width="150" />
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button size="small" @click="showEdit = true ;console.log(scope.row) ;emits('edit', scope.row)">编辑</el-button>
            <el-popconfirm class="box-item" title="确定要移除这条信息吗？" placement="top-start"
              @confirm="handleDeleteConfirm(scope.$index, scope.row.code)">
              <template #reference>
                <el-button link type="danger" size="small">
                  移除
                </el-button>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
      <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
          :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <InternationalEdit ref="editRef" @save-success="handleSaveSuccess" v-model="showEdit"  />
  </div>
</template>

<script setup>
import { getI18nList, deleteI18nList, } from '@/Api/i18n';
import { ref, onMounted, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import InternationalEdit from '../../Components/InternationalEdit.vue';
const emits= defineEmits(['edit'])
defineProps(['scope.row'])
const I18nList = ref([])
const currentPage = ref(1)
const pageSize = ref(15)
const total = ref(0)
const editRef = ref(null);
const showEdit = ref(false)

const fetchI18nList = () => {
  const params = {
    current: currentPage.value.toString(),
    currentSize: pageSize.value.toString(),
    timestamp: Date.now() // 关键：添加时间戳，每次请求参数不同
  };
  getI18nList(params).then(res => {
    I18nList.value = res.data.data.records;
    total.value = res.data.data.total || 0;
  });
};

const handleDeleteConfirm = (index, code) => {
  deleteI18nList(code).then(res => {
    if (res.data?.code === 200 || res.code === 200) {
      ElMessage.success('删除成功');
      fetchI18nList();
    } else {
      ElMessage.error(res.data?.message || res.message || '删除失败');
    }
  }).catch(err => {
    console.error('删除接口调用失败', err);
    ElMessage.error('删除失败，请重试');
  });
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchI18nList();
}

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  fetchI18nList();
}

onMounted(async () => {
  await fetchI18nList();
  await nextTick(); // 等待子组件渲染
  console.log('父组件检测到的子组件：', editRef.value); // 新增调试日志
  if (editRef.value) {
    console.log('子组件暴露的方法：', editRef.value.setEditItem);
  }
});

const handleEdit = (id) => {
  showEdit.value = true;
  // 获取当前行的数据
  const row = I18nList.value.find(item => item.id === id);
  if (row && editRef.value) {
  // 调用子组件方法设置数据并显示对话框
  editRef.value.setEditItem(row);
  }

}

// 处理保存成功
const handleSaveSuccess = () => {
  fetchI18nList();
}

</script>

<style scoped>
.loading,
.no-data {
  text-align: center;
  padding: 20px;
  color: #666;
}

.container {
  width: 94%;
  margin: 20px auto;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>